<template>
  <div class="navBar">
    <div class="logo">
      <p>蜗牛找房</p>
    </div>
    <div class="location">
      <p>广州</p>
    </div>
    <a href="javascript:;" class="nav_first">首页</a>
    <a :href="item.path" v-for="(item, index) in navChoose" :key="index">
      {{item.name}}
    </a>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
  setup () {
    const navChoose = [
      { name: '新房', path: '/newroom' },
      { name: '二手房', path: '/home' },
      { name: '租房', path: '/home' },
      { name: '商业写字楼', path: '/home' },
      { name: '装修', path: '/home' },
      { name: '楼讯', path: '/home' },
      { name: '房价', path: '/chart' },
      { name: '问答', path: '/home' }
    ]
    return {
      navChoose
    }
  }
})
</script>

<style lang='less' scoped>
.navBar {
  display: flex;
  width: 100%;
  align-items: center;
  .logo {
    width: 141.18px;
    height: 28.24px;
    margin-left: calc((100vw - 1180px) / 2);
    margin-top: 15px;
    margin-bottom: 15px;
    margin-right: 26px;
    background-color: pink;
  }
  .location {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #9399a5;
    border-radius: 15px;
    width: 84px;
    height: 30px;
    p {
      font-family: 'HarmonyOS Sans SC';
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      line-height: 19px;
      color: #9399a5;
    }
  }
  a {
    font-family: 'HarmonyOS Sans SC';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    color: #9399a5;
    text-decoration: none;
    margin-left: 32px;
  }
  .nav_first {
    font-family: 'HarmonyOS Sans SC';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    color: #3072f6;
    margin-left: 80px;
  }
}
</style>
